<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
    <head>
        <title></title>
        <meta charset="utf-8">
        <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <link rel="stylesheet" href="../css/ui-base.css">
        <link rel="stylesheet" href="../css/ui-box.css">
        <link rel="stylesheet" href="../css/ui-color.css">
        <link rel="stylesheet" href="../css/appcan.control.css">
        <link rel="stylesheet" href="../css/project/new.css">
    </head>
    <body class="um-vp c-wh-pLG" ontouchstart>
        <div class="conbor uof">
            <div class="consj" id="topDiv">
                <div class="ulev2 uin9">
                    标注功能
                </div>
                <div class="umh1" id="heights"></div>
                <div class="ub ub-hor" id="height">
                    <div class="uin ub ub-f1 ub-con">
                        <div class="ub btn bc-text-head bc-btn ub-ac ub-pc ub-f1 ub-con" id="btn1">
                            打开
                        </div>
                    </div>
                    <div class="uin ub ub-f1 ub-con">
                        <div class="ub btn bc-text-head bc-btn ub-ac ub-pc ub-f1 ub-con" id="btn2">
                            添加标注
                        </div>
                    </div>
                </div>

                <div class="umh1"></div>
                <div class="ub ub-hor">

                    <div class="uin ub ub-f1 ub-con">
                        <div class="ub btn bc-text-head bc-btn ub-ac ub-pc ub-f1 ub-con" id="btn3">
                            清除标注
                        </div>
                    </div>
                    <div class="uin ub ub-f1 ub-con">
                        <div class="ub btn bc-text-head bc-btn ub-ac ub-pc ub-f1 ub-con" id="btn4">
                            关闭
                        </div>
                    </div>
                </div>
                <div class="umh1"></div>

            </div>
        </div>
        <script src="../js/appcan.js"></script>
        <script src="../js/appcan.control.js"></script>
    </body>
    <script>
        appcan.ready(function() {
            appcan.initBounce();
            uexWidgetOne.cbError = function(opid, type, data) {
                alert(data);
            }
            //apiKey授权失败，回调函数
            uexBaiduMap.onPermissionDenied = function() {
                alert(onPermissionDenied);
            }
            uexBaiduMap.onNetworkError = function() {
                alert(onNetworkError);
            }
        })
        var isSetLoc = 0;
        function clean() {
            isSetLoc = 0;
            uexBaiduMap.close();
        }

        function openmap() {
            var divTop = $('#topDiv')[0].offsetTop + $('#topDiv')[0].offsetHeight;
            var btheight = $('#height')[0].offsetHeight +$('#heights')[0].offsetHeight;
            var s = window.getComputedStyle(document.body, null);
            var w = parseInt(parseInt(s.width) - 20);
            //var w = screen.availWidth-20;
            //var h = screen.availHeight;
            var h = parseInt(s.height);
            isSetLoc = 0;
            uexBaiduMap.open(10, divTop + btheight + 10, w, h - divTop + btheight, '116.401', '39.925');
        }

        function addMark() {
            // var data=[{"id":"111","longitude":"116.404","latitude":"39.915","imageUrl":"res://pos1.png","imageWidth":"260.0","imageHeight":"260.0","message":"this is beij","title":"我的位置"},{"id":"112","longitude":"116.450","latitude":"39.989","imageUrl":"http://img0.bdstatic.com/img/image/9baf75d938553886ce515def29441ed31409109131.jpg","imageWidth":"260.0","imageHeight":"260.0","message":"this is beij","title":"我的位置"},{"id":"113","longitude":"116.351","latitude":"39.854","imageUrl":"http://img0.bdstatic.com/img/image/9baf75d938553886ce515def29441ed31409109131.jpg","imageWidth":"230.0","imageHeight":"230.0","message":"this is shangh","title":"我的位置"}],"canShowCallout":"1"}
            // var jssonstr = '{"markInfo":[{"id":"111","longitude":"116.404","latitude":"39.915","imageUrl":"res://pos1.png","imageWidth":"260.0","imageHeight":"260.0","message":"this is beij","title":"我的位置"},{"id":"112","longitude":"116.450","latitude":"39.989","imageUrl":"http://img0.bdstatic.com/img/image/9baf75d938553886ce515def29441ed31409109131.jpg","imageWidth":"260.0","imageHeight":"260.0","message":"this is beij","title":"我的位置"},{"id":"113","longitude":"116.351","latitude":"39.854","imageUrl":"http://img0.bdstatic.com/img/image/9baf75d938553886ce515def29441ed31409109131.jpg","imageWidth":"230.0","imageHeight":"230.0","message":"this is shangh","title":"我的位置"}]}';
            // /* */
                       var param1 = [
        {
            id:"10001",
            longitude:"116.400244",
            latitude:"39.963175",
icon:"http://www.iconpng.com/png/mapmarkers/marker_inside_azure.png",
            bubble:{
                title:"title1"
            }
        },
        {
            id:"10002",
            longitude:"116.369199",
            latitude:"39.942821",
            bubble:{
                title:"title2",
                bgImage:"res://btn.png"
            }
        },
        {
            id:"111",
            longitude:"116.404",
            latitude:"39.915",
icon:"http://www.iconpng.com/png/mapmarkers/marker_inside_azure.png",
            bubble:{
                title:"title3",
                bgImage:"res://btn.png"
            }
        }
    ];
    var data1 = JSON.stringify(param1);
            uexBaiduMap.addMarkersOverlay(data1);
        }

        function clearMarks() {
            var idarr = '["10001","10002","111"]';
           
            uexBaiduMap.removeMakersOverlay(idarr);
        }


        appcan.button(".btn", "ani-act", function() {
            switch(this.id) {
            case "btn1":
                openmap();
                break;
            case "btn2":
                addMark();
                break;
            case "btn3":
                clearMarks();
                break;
            case "btn4":
                clean();
                break;
            }
        })
    </script>
</html>